import React, { useState, useEffect } from "react";
import twopagecss from "../styles/twopage.module.scss";
import Learning from "./learning";
import Complate from "./complate";
import { Addbox } from "../actions/addboxAction";
import { useSelector, useDispatch } from "react-redux";
import learning from "./learning";

export default function twopage() {
  let lists = [
    { id: 1, msg: "javascript" },
    { id: 2, msg: "html" },
    { id: 3, msg: "css" },
  ];
  const [state, setstate] = useState("");
  const [list, setlists] = useState(lists);
  const [flag, setflag] = useState(false);
  const [value, setvalue] = useState("");
  const dispatch = useDispatch();
  function GenNonDuplicateID(randomLength: any) {
    return Number(Math.random().toString().substr(3, randomLength) + Date.now()).toString(36);
  }
  const addbox = () => {
    setflag(true);
    if (flag && value != "") {
      let a: any = [...list, { id: GenNonDuplicateID(3), msg: value }];
      setvalue("");
      setlists(a);
      setflag(false);
    }
  };
  let learningEle = document.getElementById("learning");
  useEffect(() => {
    setstate("0");
  });
  useEffect(() => {
    // console.log(learningEle);
  }, [state]);
  let movedown = (e: any, id: any) => {
    e.target.style.position = "absolute";
    e.target.style.zIndex = 9;
    let xx = e.target.offsetWidth;
    let yy = e.target.offsetHeight;
    document.onmousemove = (i: any) => {
      e.target.style.top = i.clientY - yy / 2 + "px";
      e.target.style.left = i.clientX - xx / 2 + "px";
      if (learningEle) {
        // console.log(e.target.offsetLeft - learningEle.offsetLeft);
        // if (Math.abs(e.target.offsetLeft - learningEle.offsetLeft) < e.target.offsetWidth && Math.abs(e.target.offsetTop - learningEle.offsetTop) < e.target.offsetHeight) {
        //   console.log("碰撞了！！");
        // }
        // if (Math.abs(e.target.offsetLeft - learningEle.offsetLeft) < e.target.offsetWidth) {
        //   console.log("碰撞了！！");
        // }
        if (
          e.target.offsetTop - learningEle.offsetTop < learningEle.offsetHeight &&
          e.target.offsetTop - learningEle.offsetTop > 0 &&
          e.target.offsetLeft - learningEle.offsetLeft > -e.target.offsetWidth / 2 &&
          e.target.offsetLeft - learningEle.offsetLeft < learningEle.offsetWidth / 2
        ) {
          learningEle.style.border = "2px solid red";
          console.log("碰撞了！！");
          e.target.onmouseup = () => {
            if (learningEle)
              if (
                e.target.offsetTop - learningEle.offsetTop < learningEle.offsetHeight &&
                e.target.offsetTop - learningEle.offsetTop > 0 &&
                e.target.offsetLeft - learningEle.offsetLeft > -e.target.offsetWidth / 2 &&
                e.target.offsetLeft - learningEle.offsetLeft < learningEle.offsetWidth / 2
              ) {
                mouseup(e);
                dispatch(Addbox(list.filter((item: any) => item.id == id)[0]));
                setlists(list.filter((item: any) => item.id != id));
              }
          };
        } else {
          learningEle.style.border = "none";
          document.onmouseup = () => {
            mouseup(e);
          };
        }
      }
    };
    // document.onmouseup = () => {
    //   mouseup(e);
    // };
  };
  function mouseup(e: any) {
    document.onmousemove = null;
    e.target.style.position = "";
    e.target.style.zIndex = 0;
    if (learningEle) learningEle.style.border = "none";
  }

  return (
    <div className={twopagecss.box}>
      <div>
        <p className={twopagecss.pink}>Prepare to study</p>
        <div className={twopagecss.pink}>
          <div>
            {list.map((item: any) => {
              return (
                <div
                  className={twopagecss.addboxed}
                  key={item.id}
                  onMouseDown={(e) => {
                    movedown(e, item.id);
                  }}>
                  {item.msg}
                </div>
              );
            })}
          </div>
          {flag ? (
            <input
              type="text"
              onChange={(e) => {
                setvalue(e.target.value);
              }}
              onBlur={addbox}
            />
          ) : (
            ""
          )}
          <p className={twopagecss.addbox} onClick={addbox}>
            +
          </p>
        </div>
      </div>
      <div>
        <p className={twopagecss.greenyellow}>Learning</p>
        <div className={twopagecss.greenyellow} id="learning">
          <Learning></Learning>
        </div>
      </div>
      <div>
        <p className={twopagecss.gainsboro}>Complate</p>
        <div className={twopagecss.gainsboro} id="complate">
          <Complate></Complate>
        </div>
      </div>
    </div>
  );
}
